<!-- Datatables -->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet" />

<!-- page content -->
<div id="roles" class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="title_left">
        <h3>Roles Page</h3>
      </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="x_panel">
          <div class="x_title">
            <button
                    class="btn btn-primary"
                    type="button"
                    data-toggle="modal"
                    data-target="#modalAdd"
                    @click="initAddModel()"
            >
              新增
            </button>
            <ul class="nav navbar-right panel_toolbox">
              <li>
                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
              </li>
              <li class="dropdown">
                <a
                        href="#"
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        role="button"
                        aria-expanded="false"
                ><i class="fa fa-wrench"></i
                ></a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Settings 1</a>
                  <a class="dropdown-item" href="#">Settings 2</a>
                </div>
              </li>
              <li>
                <a class="close-link"><i class="fa fa-close"></i></a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">
            <div class="row">
              <div class="col-sm-12">
                <div class="card-box table-responsive">
                  <table
                          id="datatable"
                          class="table table-striped table-bordered"
                          style="width: 100%"
                  >
                    <thead>
                    <tr>
                      <th>ID</th>
                      <th>Role Name</th>
                      <th>Create Date</th>
                      <th>Operate</th>
                    </tr>
                    </thead>

                    <tbody></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div th:replace="account/roleAdd"></div>
  <div th:replace="account/roleEdit"></div>
</div>

<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<!-- /page content -->
<script>
  var modelsVue = new Vue({
    el: "#roles",
    data: {
      // 初始化分页页长
      pageSize: 5,
      // 定义表格数据结构
      tableData: {
        draw: 0,
        recordsTotal: 0,
        recordsFiltered: 0,
        data: [],
      },
      role: {
        id: "",
        roleName: "",
        createDate: "",
      },
    },
    methods: {
      // 定义表格行数据结构
      rowData: function (id, roleName, createDate) {
        var row = {};
        row.id = id;
        row.roleName = roleName;
        row.createDate = createDate;
        row.oprate = function () {
          return (
                  "<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#modalEdit' " +
                  "onclick='initEditModel(\"" +
                  id +
                  "\")'>编辑</a>&nbsp;" +
                  "<a href='javascript:void(0);' onclick='deleteModel(\"" +
                  id +
                  "\")' class='btn_editcolor'>删除</a>"
          );
        };
        return row;
      },
      // 初始化表格
      initTable: function () {
        var self = this;
        $("#datatable").DataTable({
          paging: true, //分页
          serverSide: true, //开启后端分页
          pagingType: "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
          pageLength: this.pageSize, //定义初始的页长
          processing: true,
          destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
          lengthChange: true, //控制是否能够调整每页的条数
          searching: true,
          "data-show-refresh": true,
          ordering: true,
          autoWidth: false,
          ajax: function (data, callback, settings) {
            // 从data获取查询数据
            var columIndex = data.order[0].column;
            var direction = data.order[0].dir;
            var orderBy = data.columns[columIndex].name;
            pageSize = data.length == undefined ? pageSize : data.length;

            var searchBean = {};
            searchBean.currentPage = data.start / pageSize + 1;
            searchBean.pageSize = pageSize;
            searchBean.orderBy = orderBy;
            searchBean.direction = direction;
            searchBean.keyword = data.search.value;

            $.ajax({
              url: "/api/roles",
              type: "post",
              contentType: "application/json",
              data: JSON.stringify(searchBean),
              success: function (rs) {
                if (!rs) {
                  layer.alert("请求出错，请稍后重试" + rs.errmsg, { icon: 2 });
                  callback(self.tableData);
                  return;
                }
                if (rs.list == null) {
                  $("#moduleTable tbody tr").remove();
                  $("#loading").remove();
                  callback(self.tableData);
                  return;
                }

                $("#loading").remove();

                var rowsData = [];
                for (var i = 0; i < rs.list.length; i++) {
                  //包装行数据
                  var rowData = self.rowData(
                          rs.list[i].id,
                          rs.list[i].roleName,
                          rs.list[i].createDate
                  );

                  // 将行数据放到数组里
                  rowsData.push(rowData);
                }
                self.tableData.data = rowsData;
                self.tableData.recordsTotal = rs.total;
                self.tableData.recordsFiltered = rs.total;
                callback(self.tableData);
              },
              error: function (data) {
                layer.alert(data.responseText, { icon: 0 });
              },
            });
          },
          columns: [
            //定义行数据字段
            { data: "id", name: "id", sortable: true },
            { data: "roleName", name: "role_name", sortable: true },
            { data: "createDate", name: "create_date", sortable: true },
            { data: "oprate", width: "80px", sortable: false },
          ],
        });
      },
      initAddModel: function () {
        this.role = {
          id: "",
          roleName: "",
          createDate: "",
        };
      },
      insertModel: function () {
        if (this.role.roleName == "") {
          layer.alert("Please inpu role info.", { icon: 0 });
          return;
        }

        console.log(this.role);

        var self = this;
        $.ajax({
          url: "/api/role",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(self.role),
          success: function (rs) {
            if (rs.status == 200) {
              $("#modalAdd").modal("hide");
              self.initTable();
            } else {
              layer.alert(rs.message, { icon: 0 });
            }
          },
          error: function (data) {
            layer.alert(data.responseText, { icon: 0 });
          },
        });
      },
      initEditModel: function (id) {
        var self = this;
        $.ajax({
          url: "/api/role/" + id,
          type: "get",
          // contentType: "application/json",
          // data: JSON.stringify(self.role),
          success: function (rs) {
            self.role = rs;
          },
          error: function (data) {
            layer.alert(data.responseText, { icon: 0 });
          },
        });
      },
      updateModel: function () {
        if (this.role.roleName == "") {
          layer.alert("Please inpu role info.", { icon: 0 });
          return;
        }

        console.log(this.role);

        var self = this;
        $.ajax({
          url: "/api/role",
          type: "put",
          contentType: "application/json",
          data: JSON.stringify(self.role),
          success: function (rs) {
            if (rs.status == 200) {
              $("#modalEdit").modal("hide");
              self.initTable();
            } else {
              layer.alert(rs.message, { icon: 0 });
            }
          },
          error: function (data) {
            layer.alert(data.responseText, { icon: 0 });
          },
        });
      },
      deleteModel: function (id) {
        var self = this;
        bootbox.confirm("Are you sure?", function (result) {
          if (result) {
            $.ajax({
              url: "/api/role/" + id,
              type: "delete",
              success: function (rs) {
                if (rs.status == 200) {
                  self.initTable();
                } else {
                  layer.alert(rs.message, { icon: 0 });
                }
              },
              error: function (data) {
                layer.alert(data.responseText, { icon: 0 });
              },
            });
          }
        });
      },
    },
    created: function () {
      window.initEditModel = this.initEditModel;
      window.deleteModel = this.deleteModel;
    },
    mounted: function () {
      this.initTable();
      // this.initRoles();
    },
  });
</script>
